<template lang="pug">
  .modal-dialog.modal__overwrite.modal__user-info(role='document', v-show="show")
    .modal-content
      .modal-header
        h5.modal-title 学生信息
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true', @click="close") ×
      .modal-body
        template(v-if="!changePassword && !changeAvatar")
          img.avatar(src="/images/avatar.jpg")
          template(v-if="user.info")
            h5 {{user.info.realName}}同学
            p 学号：{{user.info.number}}
          .modal__user-info-controls
            a(href="", @click.prevent="logout") 
              img(src="/images/icon_signout_normal.png") 
              | 退出登录
            a(href="", @click.prevent="switchScenesAvatar")
              img(src="/images/icon_changehead_normal.png")
              | 更换头像
            a(href="", @click.prevent="switchScenes")
              img(src="/images/icon_password_normal.png")
              | 修改密码
        template(v-else-if="changeAvatar")
          .upload__avatar
            .upload__entry +
            button.upload__btn.btn.btn-outline-primary 本地上传
            input(type="file")
          .from-btns
            button.btn.btn-outline-primary.btn-sm.btn-submit(type="submit") 确定
            button.btn.btn-outline-primary.btn-sm(type="cancel", @click.prevent="switchScenesAvatar") 取消
        template(v-else)
          form.form
            .form-group
              input.form-control(type="password", placeholder="输入旧密码", v-model="oldPassword")
            .form-group.form-group-new
              input.form-control(type="password", placeholder="输入新密码", v-model="newPassword")
            .from-group
              input.form-control(type="password", placeholder="再次输入新密码", v-model="repeat")
            .form__feedback.invalid-feedback.text-center.d-block(v-if="repeatError") 两次密码不一致
          .from-btns
            button.btn.btn-outline-primary.btn-sm.btn-submit(type="submit", @click="modifyPassword") 确定
            button.btn.btn-outline-primary.btn-sm(type="cancel", @click.prevent="switchScenes") 取消
</template>
<style lang="scss">
.upload__avatar {
  margin-top: 155px;
  input[type=file] {
    display: none;
  }
}
.upload__entry {
  width: 92px;
  height: 92px;
  border-radius: 10px;
  border: 1px solid $mainColor;
  text-align: center;
  line-height: 90px;
  font-size: 50px;
  color: $mainColor;
  margin: 0 auto 35px;
}
.upload__btn {
  width: 170px;
  font-size: 14px;
}
.modal__user-info {
  text-align: center;
  .modal-content {
    height: 676px;
  }
  .avatar {
    margin-top: 125px;
    width: 80px;
    height: 80px;
    border-radius: 10px;
  }
  h5 {
    margin-top: 8px;
    font-size: 16px;
    font-weight: bold;
    & + p {
      font-size: 14px;
    }
  }
  .form {
    width: 200px;
    margin-top: 150px;
    margin-left: auto;
    margin-right: auto;
  }
  .form-control {
    font-size: 12px;
    border-color: $mainColor;
  }
  .from-btns {
    margin-top: 95px;
    .btn {
      width: 140px;
    }
    .btn-submit {
      margin-right: 56px;
    }
  }
  .form-group-new {
    margin-top: 48px;
  }
  .modal-body {
    h5 {
      margin-bottom: 20px;
    }
  }
}
.modal__user-info-controls {
  display: inline-block;
  margin-top: 72px;
  a {
    display: inline-block;
    margin-right: 66px;
    font-size: 12px;
    color: #000;
    &:last-child {
      margin-right: 0;
    }
  }
  img {
    display: block;
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
  }
}
</style>

<script>
import { mapState } from 'vuex'
import api from 'api/login'
export default {
  data () {
    return {
      changePassword: false,
      changeAvatar: false,
      user: {},
      oldPassword: '',
      newPassword: '',
      repeat: '',
      repeatError: false
    }
  },
  watch: {
    repeat (val) {
      this.repeatError = !(val === this.newPassword)
    },
    newPassword (val) {
      this.repeatError = !(val === this.repeat)
    }
  },
  computed: mapState({
    show: state => state.modal.userInfo.show
  }),
  created () {
    this.user = this.$root.user
  },
  methods: {
    close () {
      this.$store.commit('switchUserInfo', false)
    },
    switchScenes () {
      this.changePassword = !this.changePassword
    },
    switchScenesAvatar () {
      this.changeAvatar = !this.changeAvatar
    },
    logout () {
      this.$store.dispatch('logout').then(() => {
        this.close()
        this.$router.replace('/login')
      })
    },
    modifyPassword () {
      if (this.repeatError) {
        return
      }
      api.changePassword({
        userId: this.user.id,
        newPassword: this.newPassword,
        oldPassword: this.oldPassword
      })
    }
  }
}
</script>